<template>
	<view>
		<scroll-view class='goshop-page-main-scroll'
			scroll-y="true" 
			refresher-enabled="true" 
			:refresher-triggered="triggered"
			:refresher-threshold="100" 
			@refresherpulling="onPulling"
			@refresherrefresh="onRefresh" 
			@refresherrestore="onRestore" 
			@refresherabort="onAbort"
			@scrolltolower="onButtomRefresh">
			<view class='goshop-page-main-list' :id="'content-wrap' + index">
				<swiper class="swiper" circular :autoplay="autoplay" :interval="interval"
					:duration="duration">
					<swiper-item v-for="(item,index) in topBannerListData">
						<image style="width: 100%;height: 100%;" :src="item.imgUrl" @click="onBannerJump(item)"></image>
					</swiper-item>
				</swiper>
				<view class="goshop-banner-wrap">
						<view class="headeruser-image">
							<!-- <image @tap="$Router.push({ path: '/pages/common/seller/premium'})" mode="widthFix" src="../../../../static/imgs/home/left-banner.png"></image> -->
							<image @tap="$Router.push({ path: '/pages/common/seller/premium'})" mode="widthFix" src="../../../../static/imgs/home/popular.png"></image>
						</view>
						<view>
							<view class="headeruser-image">
								<!-- <image mode="widthFix" @tap="$Router.push({ path: '/pages/common/seller/newbie'})" src="../../../../static/imgs/home/right-top-banner.png"></image> -->
								<image mode="widthFix" @tap="$Router.push({ path: '/pages/common/seller/newbie'})" src="../../../../static/imgs/home/new_arrival.png"></image>
							</view>
							<view class="headeruser-image">
								<!-- <image mode="widthFix" @tap="$Router.push({ path: '/pages/common/ranking/ranking'})" src="../../../../static/imgs/home/right-bottom-banner.png"></image> -->
							   <image mode="widthFix" @tap="$Router.push({ path: '/pages/common/ranking/ranking'})" src="../../../../static/imgs/home/leaderboard.png"></image>
							</view>
						</view>
				</view>
				<view>
					<u-tabs :list="categoryDataList"
					    @click="categoryTabClick"
						lineColor="#f56c6c"
						:activeStyle="{
							color: '#303133',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"
						:inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}"
						itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"
					></u-tabs>
					<view>
						<view class="goshop-banner-wrap u-m-t-10">
							<view class="headeruser-image">
								<image mode="widthFix" :src="centerLeftBanner.imgUrl" @click="onBannerJump(centerLeftBanner)"></image>
							</view>
							<view class="headeruser-image">
								<image mode="widthFix" :src="centerRightBanner.imgUrl" @click="onBannerJump(centerRightBanner)"></image>
							</view>
						</view>
						<view class="u-m-t-10">
							<!-- 空白页 -->
							<u-empty v-if="isEmpty === true && goodDataList.length === 0" :text="emptyText" mode="list"></u-empty>
							<goshop-good-waterfalls-flow ref="waterfallsFlowRef" @imageClick="onGoodClick" @wapperClick="onGoodClick" :data="goodDataList"></goshop-good-waterfalls-flow>
							<u-loadmore
									:status="loadStatus" 
									:loading-text="loadingText" 
									:loadmore-text="loadmoreText" 
									:nomore-text="nomoreText" 
									loadingIcon="semicircle"
									@loadmore="getGoodPage"
									style="margin-bottom: 60px;"
								/>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
					
	</view>
</template>

<script>
	import {categoryList,goodPage,bannerList} from '@/common/http.api.js'
	export default {
		props: {
		  topHeight: {
		    type: Number,
		    default: 90
		  },
		  refresher: {
		    type: Boolean
		  },
		  fixedClass: {
		    type: Boolean,
		    default: false
		  },
		  index:{
			  type:Number,
			  default:0
		  }
		},
		data() {
			return {
				//触发刷新
				triggered: false,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				categoryDataList:[],
				//加载更多标志
				loadMoreFlag:false,
				isEmpty:false,
				cleanFlag:false,
				goodDataList: [],
				loadStatus: 'loadmore',
				emptyText:'',
				loadingText: '',
				loadmoreText: '',
				nomoreText: '',
				typeText:'',
				categoryerrorText:'',
				params: {
					pageNo: 1,
					categoryId: 0, //全部
					pageSize: 10,
				},
				topBannerListData:[],
				centerLeftBanner:'',
				centerRightBanner:''
			}
		},
		mounted(){
			this.cleanFlag=false;
			this.refresh();
			this.getBannerList();
			this.resetData();
			this.getCategoryList();
			this.getGoodPage();
			this._freshing = false;
			setTimeout(() => {
				this.triggered = true;
			}, 1000)	
		},
		methods: {
			open(url) {  
				//  #ifdef  H5
				window.location.href=url;
				//   #endif
				
				//  #ifdef  APP-PLUS
				plus.runtime.openURL(url, function(res) {
					console.log(res);  
				});  
				//   #endif
			},
			onBannerJump(banner){
				if(banner.jumpType === '0'){
					this.open(banner.jumpUrl);
				}else if(banner.jumpType === '1'){
					uni.navigateTo({
						url: '/pages/common/good/info?id='+banner.jumpUrl
					});
				}else if(banner.jumpType === '2'){
					uni.navigateTo({
						url: '/pages/common/help/info?id='+banner.jumpUrl
					});
				}else if(banner.jumpType === '3'){
					uni.navigateTo({
						url: '/pages/common/center/center?id='+banner.jumpUrl
					});
				}
			},
			refresh(){
				this.emptyText = this.$t('common.empty.text');
				this.loadingText = this.$t('common.loading.text');
				this.loadmoreText = this.$t('common.loadmore.text');
				this.nomoreText = this.$t('common.nomore.text');
				this.typeText = this.$t('recommend.type.text');
				this.categoryerrorText = this.$t('recommend.categoryerror.text');
			},
			getBannerList(){
			  bannerList().then((res)=>{
				  debugger
					if(res.code === 0){
						for(let i=0;i<res.data.length;i++) {
							let itm = res.data[i];
							if(itm.level === 1){
								this.topBannerListData.push(itm)
							}else if(itm.level === 2){
								this.centerLeftBanner = itm;
							}else if(itm.level === 3){
								this.centerRightBanner = itm;
							}
						}
						//this.bannerListData = res.data;
					}
				  }).catch(error=>{
					console.error(error)
				  })
			},
			onGoodClick(item){
				uni.navigateTo({
					url: 'pages/common/good/info?id='+item.id
				});
			},
			getGoodPage(){
				this.loadStatus = 'loading';
				console.info('是否刷新：' + this.cleanFlag);
				if(this.cleanFlag){
					this.goodDataList = [];
				}
				goodPage(this.params).then((res)=>{
					uni.stopPullDownRefresh()
					console.info('数据：' + res.data.list.length);
					if(res.code === 0){
					  if(res.data.list.length === 0){
						this.isEmpty = true;
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  }else if (res.data.list.length < 10) {
						this.loadStatus = 'nomore'
						this.loadMoreFlag = false;
					  } else {
						this.params.pageNo++;
						this.loadStatus = 'loading'
						this.loadMoreFlag = true;
					  }
					  if (this.params.pageNo > 1) {
						this.goodDataList = this.goodDataList.concat(res.data.list);
					  } else {
						this.goodDataList = res.data.list;
					  }
					}
					console.info('数据：' + this.goodDataList.length);
					if(this.cleanFlag){
						console.info('刷新列表');
						this.$refs.waterfallsFlowRef.refresh()
					}
				  }).catch(error=>{
					console.error(error)
				  })
			},
			categoryTabClick(item){
				if(this.params.categoryId === item.id){
					this.cleanFlag = false;
				}else{
					this.cleanFlag = true;
				}
				this.params.categoryId = item.id;
				this.params.pageNo = 1;
				 this.$nextTick(() => {
					this.getGoodPage();
				 })
			},
			resetData(){
			  this.categoryDataList = [];
			  this.categoryDataList.push({
				    name: this.typeText,
					id:0
			  });
			},
			getCategoryList(){
				let that = this;
				categoryList().then(res => {
					if (res.code === 0) {
						//this.categoryDataList.concat(res.data);
						for(let i=0;i<res.data.length;i++) {
							let itm = res.data[i];
							this.categoryDataList.push(itm)
						}
						console.info(this.categoryDataList);
					} else {
						uni.hideLoading();
						this.$refs.uToast.show({
							message: that.categoryerrorText,
							type: 'error',
						})
					}
				});
			},
			onPulling(e) { //自定义下拉刷新控件被下拉
				console.log("onpulling", e);
			},
			// 自定义下拉刷新被复位
			onRestore() {
			  this.triggered = 'restore'; // 需要重置
			  console.error("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
			  console.error("onAbort");
			},
            onRefresh() {  //自定义下拉刷新被触发
				debugger
			    let that = this;
                if (that._freshing) return;
                that._freshing = true;
				that.getGoodPage();
                setTimeout(() => {
                    that.triggered = false;
                    that._freshing = false;
					this.$refs.waterfallsFlowRef.refresh()
                }, 3000)
				console.log("onRefresh");
            },
			onButtomRefresh() { //底部刷新
				 console.log("onButtomRefresh");
			},
		}
	}
</script>

<style lang="scss">
.headeruser-image{
	width: 46vw;
}
.headeruser-image>image{
	width: 100%;	
}
.goshop-banner-wrap{
	flex-wrap: wrap;
	display: flex;
	overflow-x: hidden;
	overflow-y: scroll;
	justify-content: space-between;
	align-items: center;
	margin-top: 10rpx;
}
</style>
